<template>
  <base-view @submit="search" :model="query">
    <template v-slot:params>
      <a-col :span="8">
        <a-form-model-item label="产品编码">
          <a-input placeholder="请输入产品编码" v-model="query.baseProdCode"/>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="产品名称">
          <a-input placeholder="请输入产品编码" v-model="query.baseProdName"/>
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item class="search">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
        </a-form-model-item>
      </a-col>
    </template>
      <div class="section">
        <a-table ref="table" :columns="columns" :dataSource="dataSource" rowKey="id" :loading="loading" :pagination="pagination" :scroll="{x: 1650}">
          <template slot="operation" slot-scope="text, record">
            <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" v-if="record.prodStatus !== '02' && record.prodStatus !== '03'" title="修改" v-has-permission="['baseProducts:update']"></a-icon>
            <a-icon type="minus-circle" theme="twoTone" twoToneColor="#4a9ff5" @click="stop(record)" v-if="record.prodStatus !== '02' && record.prodStatus !== '03'" title="停用" v-has-permission="['baseProducts:stop']"></a-icon>
              <a-icon type="play-circle" theme="twoTone" twoToneColor="#4a9ff5" @click="start(record)" v-if="record.prodStatus === '02'" title="启用" v-has-permission="['baseProducts:start']"></a-icon>
            <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情" v-has-permission="['baseProducts:info']"></a-icon>
            <a-badge status="warning" text="无权限" v-has-no-permission="['baseProducts:update','baseProducts:stop','baseProducts:start','baseProducts:info']"></a-badge>
          </template>
        </a-table>
      </div>

    <a-modal :maskClosable="false" v-model="modalVisible" :title="modalTitle" width="1200px" @ok="submit" :okText="okText" :footer="isHideFoot?null:undefined">
      <base-products-operation ref="modalForm" modal-name="基础产品"></base-products-operation>
    </a-modal>
  </base-view>
</template>

<script>
import BaseProductsOperation from './BaseProductsOperation'

export default {
  name: 'BaseProduction',
  components: {BaseProductsOperation},
  provide: function () {
    return {
      baseProductContext: this
    }
  },
  data: function () {
    return {
      beanInfo: {
        feeInputMode: '1'
      },
      modalVisible: false,
      modalTitle: '',
      isHideFoot: false,
      okText: '确定',
      modalName: '基础产品',
      operationType: 'view',
      query: {
        instId: '',
        baseProdCode:'',
        baseProdName:''
      },
      loading: false,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      columns: [
        {
          title: '机构标识',
          dataIndex: 'instId',
          width: 100
        },
        {
          title: '产品编码',
          dataIndex: 'baseProdCode',
          customRender (text) {
            return text ? ([
              '00-基础公共',
              '01-刷卡支付',
              '02-付款扫码(主扫)',
              '03-收款扫码(被扫)',
              '04-信用卡分期',
              '05-银行卡支付',
              '06-XX手机银行支付',
              '07-微信支付',
              '08-支付宝支付',
              '09-银联云闪付',
              '10-代付pos'][+text]) : ''
          },
          width: 150
        },
        {
          title: '产品名称',
          dataIndex: 'baseProdName',
          width: 150
        },
        {
          title: '产品描述',
          dataIndex: 'baseProdDesc',
          width: 200
        },
        {
          title: '产品维护界面访问路径',
          dataIndex: 'baseProdPath',
          width: 200
        },
        {
          title: '产品属性',
          dataIndex: 'prodDefaultFlag',
          customRender (text) {
            return text ? ['线下产品','线上产品'][+text] : ''
          },
          width: 100
        },
        {
          title: '微信支付通道编码',
          dataIndex: 'wechatChannelId',
          width: 150
        },
        {
          title: '支付宝支付通道编码',
          dataIndex: 'alipayChannelId',
          width: 200
        },
        {
          title: '产品状态',
          dataIndex: 'prodStatus', // 00 ~ 03  非正式 正式 停用 已注销
          customRender (text) {
            return text ? ['非正式','正式','停用','已注销'][+text] : ''
          },
          width: 100
        },
        {
          title: '审核状态',
          dataIndex: 'auditStatus',
          customRender (text) {
            return {
              '00': '待提交审批',
              '11': '注销待审核',
              '22': '停用审核通过',
              '33': '启用审核拒绝',
              '01': '新增待审核',
              '12': '注销审核通过',
              '23': '停用审核拒绝',
              '02': '新增审核通过',
              '13': '注销审核拒绝',
              '03': '新增审核拒绝',
              '41': '修改待审核',
              '31': '启用待审核',
              '42': '修改审核通过',
              '21': '停用待审核',
              '32': '启用审核通过',
              '43': '修改审核拒绝',
            }[text]
          },
          width: 150
        },
        {
          title: '操作',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
          width: 150
        }
      ],
      dataSource: [],
      feeRateColumns: [
        {
          title: '卡种/业务',
          dataIndex: 'feeType'
        },
        {
          title: '费率输入方式',
          dataIndex: 'feeInputMode',
          scopedSlots: { customRender: 'feeInputMode' }
        },
        {
          title: '费率比率(‰)',
          dataIndex: 'feeRate',
          scopedSlots: { customRender: 'feeRate' }
        },
        {
          title: '封顶值(元)/固定金额(元)',
          dataIndex: 'feeCappingAmt',
          scopedSlots: { customRender: 'feeCappingAmt' }
        }
      ],
      feeRateDataSource: [
        {
          id: '121212',
          feeInputMode: 1,
          feeType: '银联二维码借记'
        }
      ]
    }
  },
  methods: {
    async reset(){
      this.query = {instId:this.query.instId}
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    async search (e) {
      e && e.preventDefault && e.preventDefault()
      try {
        const res = await this.$get('/admin/mcmp/bBaseProdInfo', {
          instId: this.query.instId,
          baseProdCode:this.query.baseProdCode,
          baseProdName:this.query.baseProdName,
          pageNum: this.pagination.defaultCurrent,
          pageSize: this.pagination.defaultPageSize
        })
        this.dataSource = res.data.rows
        this.$set(this.pagination, 'total', +res.data.total)
      } catch (e) {
        console.error(e)
      }
    },

    openModal(type = 'view', beanInfo) {
      this.modalTitle = {add: `新增${this.modalName}`, edit: `编辑${this.modalName}`, view: `${this.modalName}详情`, stop: `${this.modalName}停用`, start: `${this.modalName}启用`}[type]
      this.modalVisible = true
      this.okText = {add: '保存', edit: '保存', view: '关闭', stop: '停用', start: '启用'}[type]
      if(type === 'view'){
        this.isHideFoot = true;
      }else{
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.operatorType = type
        if (type === 'edit' || type === 'view' || type === 'stop' || type === 'start') {
          this.$refs.modalForm.setBeanInfo(beanInfo)
        }
        this.$refs.modalForm.resetFields()
      })
    },
    async submit () {
      const res = await this.$refs.modalForm.submit()
      if (res) {
        this.modalVisible = false
        this.pagination.defaultCurrent = 1
        await this.search()
      }
    },
    edit (item) {
      this.openModal('edit', item)
    },
    view (item) {
      this.openModal('view', item)
    },
    stop (item) {
      this.openModal('stop', item)
    },
    start (item) {
      this.openModal('start', item)
    }
  }
}
</script>

<style scoped>
.page {
  width: 100%;
}

.section {
  background: #fff;
}

.form {
  text-align: center;
}
.select {
  width: 180px;
}

.btn-group {
  margin-bottom: 20px;
}

</style>
